<template>
  <div class="routerpage">
    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px; margin: 20px"
    >
      <el-form-item label="系统名称一">
        <el-input v-model="form.sever1" />
      </el-form-item>
      <el-form-item label="系统名称二">
        <el-input v-model="form.sever2" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>

    <div style="background: #ccc; height: 2px"></div>
    <div>
      <el-table :data="tableData.value" style="width: 800px; margin: 20px">
        <el-table-column
          prop="name"
          align="center"
          label="模块名称"
          width="280"
        />
        <el-table-column
          prop="name"
          align="center"
          label="路由设定"
          width="180"
        >
          <template #default="scope">
            <el-input v-model="scope.path" />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="显示隐藏"
          width="180"
        >
          <template #default="scope">
            您现在是<el-button type="primary" style="" @click="onSubmit"
              >显示</el-button
            >
            <!-- <el-button
              type="primary"
              style="margin-left: 20px"
              @click="onSubmit"
              >隐藏</el-button
            > -->
            状态
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="onSubmit"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div style="background: #ccc; height: 2px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { linelist } from "../../api/api";
let form = reactive({
  sever1: "2024-2025学年广东省职业院校技能大赛",
  sever2: "（中职组）舞蹈表演赛项计分系统",
});

const onSubmit = () => {
  console.log(form);
};
//系统名称设置

const tableData = reactive({
  value: [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ],
});

const getlist = () => {
  linelist({}).then((res) => {
    tableData.value = res.data;
  });
};
getlist();
</script>

<style></style>
